<!DOCTYPE html>
<html>
<head>
  <style type="text/css">@import "jquery/jquery.svg.css";</style>
  <script type="text/javascript" src="jquery/jquery-1.8.1.js"></script>
  <script type="text/javascript" src="heap.js"></script>
  <script type="text/javascript" src="alarmer.js"></script>
  <script type="text/javascript" src="charinfo.js"></script>
  <script type="text/javascript" src="keyboardlayout.js"></script>
  <script type="text/javascript" src="bouncegame.js"></script>
  <script type="text/javascript" src="raphael-min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      layout = new KeyboardLayout();
      difficulty = 0;
      level_query = layout.levels[0].query;

      $("#select_layout").change(function(event) {
        var target = event.delegateTarget;
        var selected = target.options[target.selectedIndex];
        layout = new KeyboardLayout(KeyboardLayout.LAYOUT[selected.value]);
      });

      $("#select_difficulty").change(function(event) {
        var target = event.delegateTarget;
        var selected = target.options[target.selectedIndex];
        difficulty = selected.value;
      });

      $("#select_level").change(function(event) {
        var target = event.delegateTarget;
        var selected = target.options[target.selectedIndex];
        level_query = selected.value;
      });

      var level_select = $("#select_level");
      $.each(layout.levels, function(idx, elem) {
        level_select.append($("<option/>", {
          text: elem.title,
          id: "option_" + idx,
          value: elem.query,
        }));
      });

      var layout_paper = new Raphael("div_keyboard");
      var layout_scale = 25;
      var layout_transform = new Raphael.matrix(
          layout_scale, 0,
          0, layout_scale, 0, 0);
      var make_path_string = function(path_coords) {
        var path_pieces = ["M" + path_coords[0].join(" ")];
        for (var i=1; i<path_coords.length; ++i) {
          path_pieces.push("L" + path_coords[i].join(" "));
        }
        path_pieces.push("Z");
        return path_pieces.join("");
      };
      var polys = layout.hardwareToPolygons(KeyboardLayout.HARDWARE.ansi);
      for (var i=0; i<polys.length; ++i) {
        var path = Raphael.mapPath(
            make_path_string(polys[i]),
            layout_transform);
        layout_paper.path(path);
      }

      game = new BounceGame(
        new Raphael("div_viewport"),
        new CharacterInfo(layout.query(level_query)));

      $(document).keypress(function(event) {
        var ch = String.fromCharCode(event.keyCode);
        game.on_keypress(ch);
        event.preventDefault();
      });

      $("#btn_start").
        val("Start").
        click(function(evt) {
          var target = evt.delegateTarget;
          if (game.running()) {
            $("#div_information").css("display", "none");
            $("#div_difficulty").css("display", "block");
            game.pause();
            target.value = "Start";
          } else {
            $("#div_difficulty").css("display", "none");
            var info = $("#div_information");
            info.css("display", "block");
            info.text(
              "Difficulty " + (+difficulty+1) +
              "  Level " + level_query +
              "  Layout " + layout.name()
            );
            game.difficulty(difficulty);
            game.character_info(new CharacterInfo(layout.query(level_query)));
            game.reset();
            game.start();
            target.value = "Pause";
          }
        });
    });

  </script>
  <style type="text/css">
    #div_viewport {
      display: inline-block;
      border: none;
      margin: 10px;
      padding: 5px;
      height: 400px;
      width: 500px;
    }
    #div_keyboard {
      display: inline-block;
      border: none;
      margin: 10px;
      padding: 5px;
      height: 400px;
      width: 500px;
    }
    #div_status {
      display: block;
      border: none;
      margin: 10px;
      padding: 5px;
      background-color: #ccf;
      height: 30px;
      width: 500px;
      border: 1px blue solid;
    }
    #div_difficulty {
      display: visible;
    }
    #div_information {
      display: none;
    }
  </style>
</head>
<body>
  <form>
  <div id="div_game">
    <div id="div_status">
      <div id="div_difficulty">
        <label for="select_layout">Layout:</label>
        <select id="select_layout" name="Keyboard Layout">
          <option id="option_ansi_qwerty" value="ansi_qwerty">ANSI QWERTY</option>
          <option id="option_ansi_dvorak" value="ansi_dvorak">ANSI DVORAK</option>
        </select>
        <label for="select_difficulty">Difficulty:</label>
        <select id="select_difficulty">
          <option id="option_difficulty_0" value="0">1</option>
          <option id="option_difficulty_1" value="1">2</option>
          <option id="option_difficulty_2" value="2">3</option>
          <option id="option_difficulty_3" value="3">4</option>
          <option id="option_difficulty_4" value="4">5</option>
          <option id="option_difficulty_5" value="5">6</option>
          <option id="option_difficulty_6" value="6">7</option>
          <option id="option_difficulty_7" value="7">8</option>
          <option id="option_difficulty_8" value="8">9</option>
          <option id="option_difficulty_9" value="9">10</option>
        </select>
        <label for="select_level">Level:</label>
        <select id="select_level">
          <-- To be filled in in JS code -->
        </select>
      </div>
      <div id="div_information">
        Hi there.
      </div>
    </div>
    <div id="div_viewport">
      <input id="btn_start" type="button" value="Start">
    </div>
    <div id="div_keyboard">
    </div>
  </div>
  </form>
</body>
</html>
